<template>
  <div class="page">
    <global-header title="游戏数据" @back="handleBack" />
    <main class="page-main bg-[#fff] flex flex-col justify-between">
      <ul class="flex justify-between items-center px-[15px] h-[50px] text-[14px] border-bottom">
        <li class="flex-[1.5] w-0">游戏</li>
        <li class="flex-1 w-0 text-center">流水</li>
        <li class="flex-1 w-0 text-center">今日盈亏</li>
        <li class="flex-1 w-0 text-center">倒计时</li>
      </ul>
      <div class="grow-[1] h-0 overflow-y-auto" ref="dataRef">
        <van-pull-refresh v-model="refresh" @refresh="onRefresh">
          <DataItem :item="item" v-for="item in gameStore.gameTotal" />
        </van-pull-refresh>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-main-data",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import DataItem from "./components/data-item.vue";
import { useGameStore } from "@/store/modules/game";
import { useDataPageStore } from "./hooks/useData";

const router = useRouter();
const gameStore = useGameStore();
const dataRef = ref();
const dataStore = useDataPageStore();
const refresh = ref(false);
const handleBack = () => {
  router.back();
  setTimeout(() => {
    dataStore.scrollTop = 0;
  }, 300);
};

const onRefresh = async () => {
  refresh.value = true;
  await gameStore.actionGameTotal().finally(() => {
    refresh.value = false;
  });
};
onMounted(() => {
  if (dataRef.value) {
    dataRef.value.scrollTop = dataStore.scrollTop;
  }
});
onBeforeUnmount(() => {
  if (dataRef.value) {
    dataStore.scrollTop = dataRef.value.scrollTop;
  }
});
</script>
